<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>博客详情</title>
    <base href="<%=request.getContextPath()%>/">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="static/layui/css/layui.css">
    <link rel="stylesheet" href="static/common/css/base.css">
    <script src="static/jquery/jquery.js"></script>
    <script src="static/jquery/js.cookie.js"></script>
    <script src="static/layui/layui.js"></script>
    <link rel="icon" href="static/images/favicon.ico">
    <style>
        .content {
            background-color: whitesmoke;
            margin: 10px auto;
            border-radius: 10px;
            min-height: 50vh;
        }

        .content #title {
            margin-bottom: 20px;
        }

        .content .author {
            height: 50px;
            display: flex;
        }

        .content .author .author-avatar {
            height: 100%;
            width: 50px;
        }

        .content .author .author-avatar a {
            display: block;
            height: 40px;
            width: 40px;
        }

        .content .author .author-avatar a img {
            display: block;
            height: 100%;
            width: 100%;
            border-radius: 50%;
        }

        .content .author .author-info > div {
            display: flex;
            height: 20px;
            align-items: center;
        }

        .content .author .author-info .author-name .name, #applyTime {
            margin-right: 10px;
        }


        .content .tag-list {
            display: flex;
            flex-wrap: wrap;
            height: 40px;
            align-items: center;
        }

        .content .tag-list .tag-item {
            width: 80px;
            height: 30px;
            background-color: #16b777;
            margin: 10px;
            border-radius: 6px;
        }

        .content .tag-list .tag-item a {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            width: 100%;
            color: #fafafa;
            overflow: hidden; /*超出部分隐藏*/
            white-space: nowrap; /*设置文本不换行*/
            text-overflow: ellipsis; /*设置文本超出的样式为...*/
        }

        #content img {
            max-width: 80%;
        }

        .content .opt {
            display: flex;
        }

        .content .opt .opt-info {
            height: 40px;
            width: 100px;
            display: flex;
            align-items: center;
        }

        .content .opt .opt-info .opt-icon {
            height: 30px;
            width: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .content .opt .opt-info .opt-icon i {
            font-size: 24px;
            cursor: pointer;
        }

        .content .opt .opt-info .opt-list {
            width: 100px;
        }

        .content .opt .opt-info .opt-list a {
            font-size: 14px;
        }

        .content .comment .word-limit {
            position: absolute;
            right: 5px;
            bottom: 5px;
        }

    </style>
</head>
<body>
<div class="main">
    <div class="header">
        <div class="nav">
            <div class="layui-row">
                <div class="layui-col-md2">
                    <div class="logo">
                        <a href="">
                            <img id="logo" src="" alt="">
                        </a>
                    </div>
                </div>
                <div class="layui-col-md8">
                    <div class="layui-row">
                        <div class="layui-col-md6">
                            <ul class="menu">
                                <li class="menu-item">
                                    <a href="page/index">
                                        <i class="layui-icon layui-icon-find-fill"></i>
                                        首页
                                    </a>
                                </li>
                                <li class="menu-item">
                                    <a href="page/category">
                                        <i class="layui-icon layui-icon-template-1"></i>
                                        分类
                                    </a>
                                </li>
                                <li class="menu-item">
                                    <a href="page/author">
                                        <i class="layui-icon layui-icon-group"></i>
                                        作者
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="layui-col-md6">
                            <div class="search">
                                <div class="search-group">
                                    <input id="search" type="text" placeholder="热门搜索">
                                    <i id="searchBtn" class="layui-icon layui-icon-search"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md2">
                    <div class="layui-row">
                        <div class="layui-col-md6">
                            <div class="user">
                                <div class="avatar">
                                    <a id="dropMenu" href="javascript:;">
                                        <img id="vipAvatar" src="static/upload/avatar/defaultAvatar.jpg"
                                             class="layui-nav-img">
                                        <span id="vipName"></span>
                                    </a>
                                </div>
                                <div class="login">
                                    <div class="login-btn">
                                        <a href="javascript:;" onclick="showLoginWin(0)">登录</a>
                                    </div>
                                    <div class="reg-btn">
                                        <a href="javascript:;" onclick="showLoginWin(1)">注册</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6">
                            <div class="apply">
                                <div class="apply-btn">
                                    <a href="javascript:;">
                                        <i class="layui-icon layui-icon-edit"></i>
                                        发布文章
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="body">
        <div class="content" style="display: block">
            <div style="width: 96%;margin: 0 auto">
                <h1 id="title"></h1>
                <div class="author">
                    <div class="author-avatar">
                        <a href="javascript:;">
                            <img id="avatar" src="" alt="">
                        </a>
                    </div>
                    <div class="author-info">
                        <div class="author-name">
                            <div class="name" id="authorName"></div>
                            <div class="follow" id="follow"></div>
                        </div>
                        <div class="article-info">
                            <div id="applyTime"></div>
                            <div id="readCount"></div>
                        </div>
                    </div>
                </div>
                <div class="tag-list" id="tagList">

                </div>
                <div class="content" id="content"></div>
                <div class="opt">
                    <div class="opt-info">
                        <div class="opt-icon">
                            <i id="likeIcon" onclick="saveLike()" class="layui-icon layui-icon-heart"></i>
                        </div>
                        <div class="opt-list"><a onclick="showAuthorList(1)" href="javascript:;"><span
                                id="likeCount">1</span>人点赞<i
                                class="layui-icon layui-icon-right"></i></a>
                        </div>
                    </div>
                    <div class="opt-info">
                        <div class="opt-icon">
                            <i id="collectionIcon" onclick="saveCollection()" class="layui-icon layui-icon-star"></i>
                        </div>
                        <div class="opt-list"><a onclick="showAuthorList(2)" href="javascript:;"><span
                                id="collectionCount">1</span>人收藏<i
                                class="layui-icon layui-icon-right"></i></a>
                        </div>
                    </div>
                </div>
                <div class="comment" id="comment">
                    <hr class="layui-border-black">
                    <div class="comment-group">
                        <div class="opt">
                            <div class="opt-info">
                                <div class="opt-icon">
                                    <i class="layui-icon layui-icon-chat"></i>
                                </div>
                                <div class="opt-list"><a href="javascript:;"><span
                                        id="commentCount">0</span>人评论</a>
                                </div>
                            </div>
                            <div class="opt-info">
                                <div class="opt-icon">
                                    <i class="layui-icon layui-icon-release"></i>
                                </div>
                                <div class="opt-list"><a id="applyComment" href="javascript:;"><span>发表评论</span><i
                                        class="layui-icon layui-icon-right"></i></a>
                                </div>
                            </div>
                        </div>
                        <div class="comment-form" id="commentForm" style="margin: 10px auto;display: none;">
                            <el-form class="layui-form">
                                <div class="layui-form-item">
                                    <div class="layui-input-wrap">
                                        <textarea style="resize: none;" id="commentContent" class="layui-textarea"
                                                  placeholder="评论内容"
                                                  maxlength="150"></textarea>
                                        <span class="word-limit" id="wordLimit">0/150</span>
                                    </div>
                                </div>
                            </el-form>
                            <div class="comment-btn">
                                <button lay-submit class="layui-btn" id="saveComment">评论</button>
                                <button lay-submit class="layui-btn layui-bg-orange" id="cancelComment">取消</button>
                            </div>
                        </div>
                        <fieldset class="layui-elem-field" style="margin: 20px auto">
                            <legend>评论列表</legend>
                            <div class="layui-field-box">
                                <div class="comment-list" id="commentList">

                                </div>
                            </div>
                        </fieldset>
                        <div id="commentPageTool" style="margin: 10px auto;text-align: center"></div>
                    </div>
                    <div class="comment-none">
                        <h3 style="text-align: center;margin-bottom: 20px;">该博客不支持评论</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script src="static/common/js/ajax.js"></script>
<script src="static/common/js/base.js"></script>
<script>
    /*获取地址中携带的id的值*/
    let hrefs = location.href.split("/");
    const articleId = hrefs[hrefs.length - 1].split("#")[0];
    /*判断请求的合法性*/
    if (Number.isNaN(Number.parseInt(articleId))) {
        layer.msg('文章异常！', {icon: 5}, function () {
            location.replace("page/index")
        })
    } else {
        getArticleDetail();
        readCount();
    }
    /*初始化点赞和收藏列表*/
    let likeList, collectionList;
    /*获取登录信息*/
    const loginInfo = getLoginInfo() || "";
    /*加载分页插件*/
    const laypage = layui.laypage;
    /*初始化评论分页数据*/
    const commentPageInfo = {
        page: 1,
        limit: 3
    }

    /*配置多行文本框计数器*/
    $("#commentContent").on("input", function () {
        const maxLength = $(this).prop("maxlength");
        const len = this.value.length;
        $("#wordLimit").text(len + "/" + maxLength);
        if (len >= maxLength) {
            $("#wordLimit").css("color", "red");
        } else {
            $("#wordLimit").css("color", "black");
        }
    });
    /*发表评论按钮*/
    $("#applyComment").click(function () {
        $("#commentForm").slideToggle(800);
    });
    /*取消评论按钮*/
    $("#cancelComment").click(function () {
        $("#commentContent").val("")
        $("#commentForm").slideUp(800);
    })
    /*保存评论按钮*/
    $("#saveComment").click(function () {
        const content = $("#commentContent").val();
        if (!content) {
            layer.msg("请输入评论内容", {icon: 5});
            return false;
        }
        http.post('article/comment/save', {content, articleId}, function () {
            layer.msg("发表成功！", {icon: 6});
            commentPageInfo.page = 1;
            $("#commentContent").val("")
            $("#commentForm").slideUp();
            getCommentList();
        })
    })

    /*获取文章详情*/
    function getArticleDetail() {
        http.get('blog/article/detail/' + articleId, null, function (res) {
            if (res.data) {
                const article = res.data
                if (article.status === 1 && article.articleStatus === 1) {

                    $("#title").text(article.title)
                    $("#avatar").prop("src", "static/upload/" + article.author.avatar)
                    $("#authorName").html('<a href = "page/user/info/' + article.author.userinfoId + '" > ' + article.author.nickname + ' </a>');
                    /*是否展示关注按钮以及是否已经关注*/
                    if (article.author.userinfoId === loginInfo.userinfoId) {
                        $("#follow").empty();
                    } else {
                        const followList = article.author.followList || [];
                        let $followHtml = '<a href="javascript:;" onclick="follow(' + article.author.userinfoId + ')" style="color: orange"><i class="layui-icon layui-icon-addition"></i>关注</a>';
                        let isFollow = false;
                        for (let i = 0; i < followList.length; i++) {
                            if (followList[i].optId === loginInfo.userinfoId) {
                                isFollow = true;
                                break;
                            }
                        }
                        if (isFollow) {
                            $followHtml = '<a href="javascript:;" onclick="follow(' + article.author.userinfoId + ')" style="color: green">已关注</a>';
                        }
                        $("#follow").empty().append($followHtml);
                    }

                    $("#applyTime").text(article.applyTime)
                    $("#readCount").text("阅读 " + article.readCount)
                    /*渲染文章标签*/
                    let $tagHtml = '';
                    const tagList = article.articleTagList || [];
                    for (const tag of tagList) {
                        $tagHtml += '<div class="tag-item"><a href="javascript:;">' + tag.tag.name + '</a></div>';
                    }
                    $("#tagList").empty().append($tagHtml)
                    /*渲染文章内容*/
                    $("#content").html(article.content);
                    /*渲染点赞列表*/
                    likeList = article.likeList;
                    let isLike = false;
                    for (let i = 0; i < likeList.length; i++) {
                        if (likeList[i].optId === loginInfo.userinfoId) {
                            isLike = true;
                            break;
                        }
                    }
                    if (isLike) {
                        $("#likeIcon").removeClass("layui-icon-heart").addClass("layui-icon-heart-fill");
                    } else {
                        $("#likeIcon").removeClass("layui-icon-heart-fill").addClass("layui-icon-heart");
                    }
                    $("#likeCount").text(likeList.length)
                    /*渲染收藏列表*/
                    collectionList = article.collectionList;
                    let isCollection = false;
                    for (let i = 0; i < collectionList.length; i++) {
                        if (collectionList[i].optId === loginInfo.userinfoId) {
                            isCollection = true;
                            break;
                        }
                    }
                    if (isCollection) {
                        $("#collectionIcon").removeClass("layui-icon-star").addClass("layui-icon-star-fill");
                    } else {
                        $("#collectionIcon").removeClass("layui-icon-star-fill").addClass("layui-icon-star");
                    }
                    $("#collectionCount").text(collectionList.length)
                    /*判断评论状态*/
                    if (article.commentStatus === 1) {
                        $(".comment-group").show();
                        $(".comment-none").hide();
                        getCommentList();
                    } else {
                        $(".comment-group").hide();
                        $(".comment-none").show();
                    }
                } else {
                    layer.msg('文章异常！', {icon: 5}, function () {
                        location.replace("page/index")
                    })
                }
            } else {
                layer.msg('文章异常！', {icon: 5}, function () {
                    location.replace("page/index")
                })
            }
        })
    }

    /*关注或取消关注作者*/
    function follow(userinfoId) {
        if (getLoginInfo()) {
            http.get('follow/' + userinfoId, null, function () {
                layer.msg("操作成功！", {icon: 6});
                getArticleDetail()
            })
        } else {
            layer.alert('请先登录！', {icon: 5});
        }
    }

    /*增加阅读量，进入页面30秒后自动增加*/
    function readCount() {
        setTimeout(function () {
            http.post('blog/article/read/count', {articleId})
        }, 1000 * 30)
    }

    /*弹窗展示收藏和点赞列表*/
    function showAuthorList(type) {
        let isShow = true;
        if (type === 1) {
            if ($("#likeCount").text() === "0") {
                isShow = false;
            }
        } else {
            if ($("#collectionCount").text() === "0") {
                isShow = false;
            }
        }
        if (isShow) {
            layer.open({
                type: 2,
                content: "page/like/list?type=" + type + "&articleId=" + articleId,
                area: ["400px", "700px"],
                title: type === 1 ? "点赞列表" : "收藏列表"
            })
        }
    }

    /*点赞*/
    function saveLike() {
        if (loginInfo) {
            http.get("like/" + articleId, null, function () {
                getArticleDetail();
            })
        } else {
            layer.alert('请先登录！', {icon: 5})
        }
    }

    /*收藏*/
    function saveCollection() {
        if (loginInfo) {
            http.get("collection/" + articleId, null, function () {
                getArticleDetail()
            })
        } else {
            layer.alert('请先登录！', {icon: 5})
        }
    }

    /*获取评论列表*/
    function getCommentList() {
        commentPageInfo.articleId = articleId
        http.get('blog/comment/page', commentPageInfo, function (res) {
            const commentList = res.data;
            let $html = '';
            for (const comment of commentList) {
                $html += '<div class="comment-item" style="margin-top: 10px"><div class="author"><div class="author-avatar"><a href="page/user/info/' + comment.userinfo.userinfoId + '"><img src="static/upload/' + comment.userinfo.avatar + '" alt=""></a></div><div class="author-info" style="width: 70%"><div class="author-name" style="justify-content: space-between"><div class="name"><a href="page/user/info/' + comment.userinfo.userinfoId + '">' + comment.userinfo.nickname + '</a></div><div class="del" style="display: ' + (comment.userinfo.userinfoId === loginInfo.userinfoId ? "block" : "none") + '"><a href="javascript:;" onclick="delComment(' + comment.commentId + ')">删除评论<a/></div></div><div class="article-info"><div class="comment-time">评论时间:' + comment.commentTime + '</div></div></div></div><div class="comment-content"><blockquote class="layui-elem-quote layui-quote-nm" style="width: 90%">' + comment.content + '</blockquote></div></div>';
            }
            $("#commentList").empty().append($html);
            if (res.count > commentPageInfo.limit) {
                /*渲染分页插件*/
                laypage.render({
                    elem: "commentPageTool",
                    count: res.count,
                    limit: commentPageInfo.limit,
                    curr: commentPageInfo.page,
                    jump: function (obj, first) {
                        commentPageInfo.page = obj.curr
                        commentPageInfo.limit = obj.limit
                        // 首次不执行
                        if (!first) {
                            getCommentList();
                        }
                    }
                })
            }
            /*渲染评论总数*/
            $("#commentCount").text(res.count)
        })
    }

    /*删除评论*/
    function delComment(commentId) {
        layer.confirm('确定删除该评论吗?', {icon: 3}, function (index) {
            http.delete('article/comment/delete/' + commentId, null, function () {
                layer.msg("删除成功！", {icon: 6})
                commentPageInfo.page = 1
                getCommentList()
            })
            layer.close(index);
        })
    }
</script>
</html>
